import { computerCss, computerWidthHeightTopLeft } from './unit.js'
import $ from 'jquery'
import { send } from '../index.js' // 发送websocket的函数

function popupPX(data) {
  // console.log(data);
  creatPop(data)
  creatAlert(data)
  // data.iconOrd = "http://192.168.1.190:8848/ord?file:^ahuStart.png";
  computerWidthHeightTopLeft(data)
  let dom = ''
  dom +=
    '<div id=' +
    data.id +
    ' class="popupDiv" style=position:absolute;overflow:hidden;' +
    computerCss(
      [
        {
          width: 'width',
          height: 'height',
          left: 'left',
          top: 'top',
        },
      ],
      data,
      'px'
    ) +
    buildPropertyNiagaraToCss(data) +
    '>'
  if (data.iconOrd == 'null') {
    dom += '<img id="img' + data.id + '"  style="width:100%;height:100%;">'
  } else {
    dom +=
      '<img id="img' +
      data.id +
      '"  style="width:100%;height:100%;" src="/ord/' +
      data.iconOrd +
      '">'
  }
  dom += '</div>'
  // console.log(dom);
  return dom
}

function buildPropertyNiagaraToCss(data) {
  var styleStr = ''
  if (data.pxOrd && data.pxOrd != 'null') {
    styleStr += 'cursor:pointer;'
  }
  return styleStr
}
var sendArr = [] // 立即订阅的事件的数组
function creatPop(data) {
  var bindingsArr = []
  if (data.bindings && data.bindings.length != 0) {
    data.bindings.map((item) => {
      // console.log(item);
      if (!('items' in item)) {
        bindingsArr.push({
          id: item.id,
          ord: item.ord,
          class: 'popup',
          attribute: 'text',
        })
      } else {
        var arr = item.items[0].items // 属性数组
        var emptyJson = {}
        arr.map((it) => {
          emptyJson[it.name] = it.value
        })
        sendArr.push(
          $.extend(emptyJson, {
            id: data.id,
            ord: item.ord,
            class: 'popup',
            attribute: 'src',
          })
        )
      }
    })
  }
  bindingsArr = JSON.stringify(bindingsArr)
  var domStr = `<div id="${
    data.id + 'hover'
  }" class="bg-hover" title="" data='${bindingsArr}' style="left: 358.453px;top: 149.5px;">
                    <span class="triangle triangle-right-top"></span>
                    <div class="hover-box">
                        <div class="hover-title">${data.title}</div>
                        <ul class="hover-list">`
  for (var i = 0; i < data.bindings.length; i++) {
    var nowData = data.bindings[i]
    if (!('items' in nowData)) {
      domStr += `<li><span id=${nowData.id + 'span'}>${
        nowData['itemName']
      } :&nbsp;&nbsp;</span><span id=${nowData.id}></span></li>`
    }
  }

  domStr += `</ul>
                    </div>    
                </div>`
  $('#main').append(domStr)
}

function creatAlert(data) {
  if (data.pxOrd) {
    var width = data.popupSize.split(',')[0]
    var height = data.popupSize.split(',')[1]
    // data.pxOrd = "http://192.168.1.190:8848/ord?file:^PxFile.px";
    // data.pxOrd = "https://www.baidu.com";
    var bindingsArr = []
    bindingsArr = JSON.stringify(bindingsArr)
    var domStr = `<div id="${
      data.id + 'mark'
    }" class="bg-mark" title=" " data='${bindingsArr}' style="">
                        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:8px;overflow:hidden;">
                            <div style="position:relative;width:100%;height:48px;background-color:#fff;">
                                <span style="position:absolute;top:17px;left:16px;line-height:1;font-size:14px;color:#1f1f1f;">${
                                  data.title
                                }</span>
                                <img class="closeBtn" src="">
                            </div>
                            <iframe style="width:${width}px;height:${height}px;display:block;border:1px solid #ccc;border-width:1px 0;" src="${
      '/ord/' + data.pxOrd
    }"></iframe>
                        </div>
                    </div>`
    $('#main').append(domStr)
  }
}

function popupPXEvent(data) {
  $('.popupDiv').click(function () {
    var id = $(this).attr('id')
    var alertId = '#' + id + 'mark'
    if ($(alertId).length == 1) {
      $(alertId).show()
    } else {
      return false
    }
  })
  $('.closeBtn').click(function () {
    $(this).parents('.bg-mark').hide()
  })
  $('.bg-mark').click(function () {
    $(this).hide()
  })
  $('.popupDiv').mouseenter(function (e) {
    var e = e || event
    var id = $(this).attr('id')
    var popupid = '#' + id + 'hover'
    var mouseLeft = e.clientX
    var mouseTop = e.clientY
    var domLeft = $(this).offset().left
    var domTop = $(this).offset().top
    var left = $(this).css('left')
    var top = $(this).css('top')
    var height = $(this).height()
    var width = $(this).width()
    var popupWidth = $(popupid).width()
    var popupHeight = $(popupid).height()
    var computerLeft = domLeft - popupWidth - 10
    var computerTop = domTop - popupHeight / 3 + 10
    if (computerLeft < 0) {
      computerLeft = domLeft + parseFloat(width) + 20
      $(popupid)
        .find('.triangle')
        .removeClass('triangle-right-top')
        .addClass('triangle-left-top')
    }
    if (computerTop < 0) {
      computerTop = 0
    }
    var data = $(popupid).attr('data')
    // 开始订阅
    send({
      type: 'subscriber',
      ordList: JSON.parse(data),
    })
    $(popupid)
      .css({
        left: computerLeft,
        top: computerTop,
      })
      .show()
  })
  $('.popupDiv').mouseleave(function () {
    var id = $(this).attr('id')
    var popupid = '#' + id + 'hover'
    var data = $(popupid).attr('data')
    // 取消订阅
    send({
      type: 'unSubscriber',
      ordList: JSON.parse(data),
    })
    $('.bg-hover').hide()
  })
  // 直接订阅一个点
  send({
    type: 'subscriber',
    ordList: sendArr,
  })
  // send({
  //     "type":"subscriber",
  //     "ordList":JSON.parse()
  // })
}
function popupPXSubscriber(nowData) {
  // console.log(nowData);
  if (nowData.attribute == 'text') {
    $('#' + nowData.id).text(nowData.value + nowData.unit)
  } else if (nowData.attribute == 'src') {
    $('#img' + nowData.id).attr('src', '/ord/' + nowData[nowData.value])
    // $("#loading").hide();
  }
}

export { popupPX, popupPXEvent, popupPXSubscriber }
